<template>
<!--  <div v-bind:id="chartId" style="margin-top: 25px;width: 100%;height:400px;"></div>-->
  <div :id="chartId" style="margin-top: 25px;width: 100%;height:400px;"></div>
</template>
<script>
import * as echarts from 'echarts';
import { mapState } from 'vuex';
import axios from "axios";
import moduleFaultAlertChart from "@/store/modules/faultAlert";
export default {
  name: "FaultParaChart",
  // props:["chartId","title","legend","xAxisData","series"],
  props:["chartId",'faultCode'],
  // props:{},
  data() {
    return {
      urlBase: process.env.VUE_APP_BASE_URL || "http://119.23.127.239:3333/phm-web-service-gz/",
      mayChart:{},
      timer : null,
      chartData:{
        chartId:1,
        paraList: ['Email'],
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        datas: [{
          name: 'Email',
          data: [100, 110, 100, 110, 90, 230, 210]
        }]
      }
    }
  },

  mounted(){
    // console.log("!!!!!!!!!!!!!曲线的入参：",this.faultCode);
    let chartDom = document.getElementById(this.chartData.chartId);
    this.myChart = echarts.init(chartDom);
    if(!!this.timer){
      // console.log("this.intervalId:",this.timer);
    }else{
      this.timer = setInterval(this.getChartData, 1000);
    }


  },
  watch:{
    "$store.state.moduleFaultAlertChart.chartData"() {
      this.chartData = this.$store.state.moduleFaultAlertChart.chartData;
      // console.log("11111",this.chartData);
      this.drawChart(this.myChart,this.chartData.chartId,this.chartData.title,this.chartData.paraList,this.chartData.xAxis,this.chartData.datas);
},
  },
  methods:{
    //折线图表数据获取
    getChartData:function (){
      // console.log("曲线的入参：",this.faultCode);
      this.$store.dispatch('moduleFaultAlertChart',this.faultCode);
      // console.log("paramentsChart0000: ",this.faultCode);
    },
    drawChart:function(myChart,chartId,title,legend,xAxisData,datas)
    {
      // console.log("drawChart:",datas);
      let series = new Array();
      for(let i = 0; i < datas.length; i++){
        series.push(
            {
              name: datas[i].name,
              data: datas[i].data,
              type: 'line',
              stack: 'Total',
              areaStyle: {},
              emphasis :{
                focus: 'series'
              }
            }
        );
      }
      // console.log("paramentsChart001:",series);
      // this.$nextTick(() => {
      let newPromise = new Promise((resolve) => {
        resolve()
      })
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        myChart.setOption({
          title: {
            text: title
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {legend},
          // {
          //   data:legend.data
          // },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: xAxisData
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: series
        },true);
      })
      // console.log("###########",legend,series[0]);
    }
  },
  destroyed() {
    if (!!this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  }
}

</script>